<template>
  <div id="unityContainer" class="u3d-page">
    <iframe ref="rfrm" :src="url" frameborder="0" @load="onFrmLoad"></iframe>
    <!-- 场景基础工具 -->
    <div class="scene-tool">
      <input v-show="false" type="button" value="截图" @click="hPic">
      <el-scene-tool ref="rTool" @onCall="toFrmEv"></el-scene-tool>
    </div>
    <!-- <div class="pgs-menu">
      <elmenu @onCall="menuData"></elmenu>
    </div> -->
    <el-button v-show="false" class="getPos" @click="hCallScene('GetCurentBuildPos', '', 'OnCurrPos')">
      获取当前方位
    </el-button>
  </div>
</template>
<script setup>
import elmenu from '@/components/el-menu.vue'
import {
  ref,
  onMounted,
  nextTick,
} from "vue";
import elSceneTool from '@/unity/scene-tool.vue';
//4.楼宇切换
const rTool = ref(null);
const hCallScene = (h, d, b) => {
  toFrmEv("CallScene", {
    h: h,
    dat: d
  }, b);
}
const menuData = (h, d, b) => {
  console.log("unity3D传输事件", h, d, b);
  console.log("ref", rTool.value);
  hCallScene("SetCurrentBuild", "");
}
const hCallDev = (h, d, b) => {
  toFrmEv("CallDev", {
    h: h,
    dat: d
  }, b);
}
const evs = {
  OnDevLoadDone: () => {
    //注册楼层切换部件
    toFrmEv("RegistryTool", "CallTool");
    //隐藏默认楼层切换部件
    //let toolStl = `display:none; top:200px;left:500px;right:500px;bottom:100px;`
    //toFrmEv("SetToolStl", toolStl);
    hCallDev("GetDeviceAll", "true", "OnAllDev");
  },
  OnCurrPos: (dat) => {
    // 修改 m_bName 的值
    dat[0].m_bName = "";
    hCallScene("SetCurrentBuildPos", dat[0]);
    hCallScene("SetCurrentBuild", "");
    let toolStl = `display:none; top:200px;left:500px;right:500px;bottom:100px;`
    toFrmEv("SetToolStl", toolStl);
  },
  hOnSceneDone: () => {
    toFrmEv("RegistryTool", "CallTool");
    //改变透视颜色，目前不使用
    // hCallScene("SetOpacityColor", "#11223344");
    setTimeout(() => {
      //默认视角如下
      let pinfo = {
        m_use: true,
        m_bName: '',
        m_Pos: '{x:-38.25116,y:7.791918,z:-62.10885}',
        m_Rot: '{x:3.919995,y:357.6,z:-6.217746e-07}'
      }
      hCallScene("SetCurrentBuildPos", pinfo);
      hCallScene("SetCurrentBuild", "");
      let toolStl = `display:none; top:200px;left:500px;right:500px;bottom:100px;`
      toFrmEv("SetToolStl", toolStl);
    }, 100);
  },
  CallTool: (dat) => {
    let h = dat.h,
      d = dat.dat;
    let fn = rTool.value?.callIn[h];
    if (fn) {
      fn(d)
    } else {
      console.log("工具未完成", h, d);
    }
  },
  DevClickDbl: (dat) => {
    let d = dat.dat; //设备信息
    let info = dat.info; //绑定数据 
    if (!d && !info) {
      console.log("其它", dat);
      return;
    }
    hOut("DevClickDbl", d, info);
    // if (info.modId == 32) {
    //   hOut("OnBuildInfo", dat);
    //   return;
    // }
    // hOut("PlayCam", {
    //   id: d.id,
    //   name: d.name || info.Name
    // });
  }
}

let uwin;
//初始化
const onFrmLoad = e => {
  uwin = e.target.contentWindow;
}
const url = ref("");
//监听事件
const hRefPage = () => {
  url.value = window.webUI;
  window.addEventListener("message", onFrmEvs, false);
}
//传送事件
const toFrmEv = (h, d, b) => {
  uwin.postMessage({
    h: h,
    d: d ? JSON.parse(JSON.stringify(d)) : "",
    b: b
  }, "*");
}
window.posScene = toFrmEv;
//接收事件
const onFrmEvs = (args) => {
  const {
    h,
    dat
  } = args.data;
  let ev = evs[h];
  if (ev) {
    ev(dat);
    return;
  }
  hOut(h, dat);
  //console.log("未处理事件", h, dat);
}

//SetStartHotSpot ，SetCloseHostSpot
const showHot = ref(false);

//3.回调事件 event out.向父级传出事件
const hOut = (fn, dat, d2) => {
  hEmit("call", fn, dat, d2);
}

//事件抛出
//外层绑定@onFn="hOnFn"
//触发hEmit('onFn', t);
const hEmit = defineEmits(['call']);

defineExpose({
  hCallIn: toFrmEv,
});

onMounted(() => nextTick(() => {
  hRefPage();
}));
</script>

<style scoped lang="scss">
iframe {
  border: 0;
  height: 100%;
  width: 100%;
  background: transparent;
}

.getPos {
  position: absolute;
  top: 10%;
  left: 40%;
  width: 100px;
  height: 50px;
  line-height: 50px;
}

.hot {
  position: absolute;
  background: linear-gradient(to bottom, #ff008b, #99d95e);
  top: 50%;
  width: 25px;
  height: 150px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  z-index: 9;
}

.hot::before {
  content: '高';
}

.hot::after {
  content: '低';
}

.u3d-page {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  pointer-events: all;
  // background: #002f41;

  .scene-tool {
    // top: var(--m-head);
    // right: calc(var(--m-aside) + 30px);
    // left: calc(var(--m-aside) + 30px);
    // position: absolute;
    // bottom: 130px; // calc(20px + var(--m-footer));
    // pointer-events: none;
    // z-index: 2;
    top: 50px;
    right: 600px;
    left: 0;
    position: absolute;
    bottom: 80px;
    pointer-events: none;
    // z-index: 2;
    width: 100%;

  }

  .pgs-menu {
    position: absolute;
    bottom: 32px;
    z-index: 101;
    left: 50%;
    transform: translateX(-50%);
  }

}

.u3d-page.sfull {
  width: 100%;
  height: 100%;
  margin: 0;
}
</style>